<template>
    <div class="box">
        <header class="tou">
            <van-nav-bar title="购物车" left-arrow @click-left="$router.go(-1)" />
        </header>
        <main class="zhong">
            <!-- {{ store.cartList }} -->
            <van-empty v-if="store.cartList.length == 0"
                image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" image-size="80"
                description="购物车空空如也" />
            <van-swipe-cell v-else v-for="item in store.cartList" :key="item.id" lazy-load>
                <van-card :num="item.count" :price="item.price" :title="item.title" :thumb="item.image">
                    <template #tag>
                        <van-checkbox v-model="item.checked"></van-checkbox>
                    </template>
                    <template #footer>
                        <van-stepper v-model="item.count" />
                    </template>
                </van-card>
                <template #right>
                    <van-button square text="删除" type="danger" class="delete-button"
                        @click="store.deleteItem(item.id)" />
                </template>
            </van-swipe-cell>
        </main>
        <van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit">
            <van-checkbox v-model="checked">全选</van-checkbox>
        </van-submit-bar>
    </div>
</template>
<script setup>
import { useCounterStore } from "@/stores/counter";
const store = useCounterStore();
</script>
<style lang="scss" scoped>
.delete-button {
    height: 100%;
}

.van-submit-bar {
    bottom: 50px;
}
</style>